<template>
  <div class="content">
    <div class="resoure">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">资源饱和一览</el-menu-item>

        <el-menu-item index="2">资源使用分析</el-menu-item>
      </el-menu>
      <div class="link" v-show="activeIndex==1">
        <div class="seachlist">
          <div class="listitem">
            <div class="itemname">媒介</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname">频道</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname">年份</div>
            <el-date-picker v-model="value3" type="year" placeholder="选择年"></el-date-picker>
          </div>
          <div class="listitem" style="width:10%;">
            <el-button type="primary">确认</el-button>
          </div>
        </div>
        <div class="eachs" id="myChart1"></div>
      </div>
       <div class="link" v-show="activeIndex==2">
        <div class="seachlist">
          <div class="listitem">
            <div class="itemname listitem1">媒介</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname listitem1">媒体</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname listitem1">月份</div>
            <el-date-picker v-model="value3" type="year" placeholder="选择年"></el-date-picker>
          </div>
           <div class="listitem">
            <div class="itemname listitem1">统计纬度</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
           <div class="listitem">
            <div class="itemname listitem1">统计指标</div>
              <el-checkbox v-model="checked1" >饱和度</el-checkbox>
  <el-checkbox v-model="checked2" >销售额</el-checkbox>
          </div>
          <div class="listitem listitem1" style="width:10%;">
            <el-button type="primary">统计</el-button>
          </div>
        </div>
        <h3>各媒介资源饱和度分析</h3>
        <div class="eachs1" id="myChart11"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      activeIndex: "1",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value3: "",
      value: "",
      value1: "",
      checked1: false,
        checked2: true
    };
  },
  mounted() {
    this.drawLine()
    this.drawLine1()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if(key==this.activeIndex){
        return
      }
      
      this.activeIndex = "" + key;
      console.log(this.activeIndex);
      // if(this.activeIndex==1){
      //   this.drawLine()
      // }else{
      //   this.drawLine1()
      // }
        // this.drawLine()
    // this.drawLine1()
    },
     getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate((+year + 1) + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 1000)
        ]);
    }
    console.log(data)
    return data;
},

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts)
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      console.log("xxxxxxx")
      myChart.setOption({
        tooltip: {
          position: "top"
        },
        visualMap: {
          min: 0,
          max: 1000,
          calculable: true,
          orient: "horizontal",
          left: "center",
          top: "top"
        },

        calendar: [
          {
            range: "2017",
            cellSize: ["auto", 20]
          },
          {
            top: 260,
            range: "2016",
            cellSize: ["auto", 20]
          },
          {
            top: 450,
            range: "2015",
            cellSize: ["auto", 20],
            right: 5
          }
        ],

        series: [
          {
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 0,
            data: this.getVirtulData(2017)
          },
          {
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 1,
            data: this.getVirtulData(2016)
          },
          {
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 2,
            data: this.getVirtulData(2015)
          }
        ]
      });
    },
     drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts)
      let myChart = echarts.init(document.getElementById("myChart11"));
      // 绘制图表
      console.log("xxxxxxx")
      myChart.setOption( {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
});
    }
  }
};
</script>
<style lang="scss" scoped>
.resoure {
  width: 97%;
  margin: 0 auto;
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 110px;
      font-size: 15px;
    }
    
  }
}
.eachs {
  width: 90%;
  height: 1000px;
  margin: 0 auto;
  margin-top: 20px;
}
.eachs1{
  height: 500px;
  width: 800px;
  margin: 0 auto;
  margin-bottom: 500px;
  // margin-top: 40px;
  
}
h3{
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
}
</style>